<template>
  <view class="checkpoint">
    <view class="background-introduction-wrap">
      <text class="background-introduction-title">背景简介</text>
      <view class="background-introduction-des">
        <p>
          大明九边重镇的辽东有一燕山，燕山乃是辽东通往大漠的门户，北至大漠，
          南至大明广袤（mao）疆土。瓦刺(a）、鞑（da）靼（da）以及建州女真部落
          每逢冬至之前皆会人燕山而过直取辽东腹地，烧杀抢掠，民不聊生，年年如此。
        </p>
        <p>
          故而万历元年时，大明皇帝朱翊 （yi）钧（jun） 便在燕山设有一堡，名叫风
          路堡。
        </p>
        <p>
          只是不知为何，这风路堡却不是建于山路之间的关口，而是开设在燕山山腰
          之上，虽说以俯（托）瞰（kan）之势，观以全局。但若建州女真部落连夜奔袭，
          绕山而过，这风路堡便如同虛设，还白白浪费钱财，故而在同年下旬，燕山关口
          处便又设定一城镇。此镇名为"流士镇”
        </p>
      </view>
    </view>
    <view class="next-step-wrap">
      <image
        @tap="nextHandler"
        :src="require('@/assets/common/next.png')"
        mode=""
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    nextHandler() {
      this.$Router.push({
        name: "person",
      });
    },
  },
};
</script>
<style>
page {
  background-color: #2f3542;
}
</style>
<style lang="scss">
.checkpoint {
  margin: 40rpx;
  .background-introduction-wrap {
    margin-top: 190rpx;
    background: #f1f2f6;
    border-radius: 10rpx;
    padding: 28rpx 0;
    .background-introduction-title {
      display: flex;
      justify-content: center;
      font-size: 36rpx;
      font-weight: 600;
      color: #333333;
    }
    .background-introduction-des {
      text-indent: 60rpx;
      p {
        font-size: 36rpx;
        padding: 20rpx 26rpx;
        line-height: 60rpx;
      }
    }
  }
  .next-step-wrap {
    display: flex;
    justify-content: flex-end;
    padding: 50rpx 0;
    image {
      width: 90rpx;
      height: 90rpx;
    }
  }
}
</style>
